<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/header"/>
<body>
<!--导航-->
<header th:include="common/nav"/>
<div class="user-info-box shadow-right-bottom">
    <h3>用户信息</h3>
    <ul class="info">
        <li>
            <div class="name">邮箱</div>
            <div class="content"><span th:text="${userInfo.loginName}"></span></div>
        </li>
        <li>
            <div class="name">昵称</div>
            <div class="content"><input id="nick" type="text" class="input-text" th:value="${userInfo.nick}"/></div>
        </li>
        <li>
            <div class="name" style="line-height: 100px;">头像</div>
            <div class="content">
                <div class="head-img" style="position: relative">
                    <img id="headImgBase64" style="background: #fff; position: absolute" class="head-img" th:src="${userInfo.headimg}"/>
                    <input id="headImg" style="position: absolute" class="head-img-file" type="file" onchange="readImg()"/>
                </div>
            </div>
        </li>
        <li>
            <br class="clear"/><br class="clear"/>
            <div id="userInfoSave" class="user-info-save">保存</div>
        </li>
    </ul>
    <br class="clear"/>
</div>
<div th:include="common/bottom"></div>
</body>
<style>
    .user-info-box {margin: 0px auto;padding: 30px;width: 990px; height: auto; background: #fff;}
    .user-info-box .info{margin: 0px 295px;width: 400px; height: auto;}
    .user-info-box .info li{padding: 30px 0px;margin: 0px auto;width: 400px; height: auto;}
    .user-info-box .info .name, .info .content {float: left;}
    .user-info-box .info .name {width: 80px;}
    .user-info-box .info .content {width: 300px;}
    .user-info-box .input-text {width: 150px; padding: 2px 8px;border-radius: 4px; border: 1px solid #9d9d9d;}
    .user-info-box .content .head-img {width: 100px; height: 100px; border-radius: 100px; border: 2px solid #b4b4b4;}
    .user-info-box .user-info-save {cursor: pointer; width: 250px; height: 30px; background: #ff8d55; color: #fff; text-align: center}

    .head-img-file {z-index: 3;position: absolute;width: 100px; height: 100px; border-radius: 100px; border: none; outline: none;opacity: 0;cursor: pointer;}
</style>
<script>

    function readImg() {
        var read = new FileReader();
        var file = $("#headImg")[0].files[0];
        var AllImgExt=".jpg|.jpeg|.gif|.bmp|.png|";
        //（把路径中的所有字母全部转换为小写
        var url = $("#headImg").val();
        var extName = url.substring(url.lastIndexOf(".")).toLowerCase();
        if(AllImgExt.indexOf(extName+"|")==-1)
        {
            ErrMsg="该文件类型不允许上传。请上传 "+AllImgExt+" 类型的文件，当前文件类型为"+extName;
            $.messager.alert('温馨提示',ErrMsg);
            return false;
        }
        read.readAsDataURL(file);
        read.onload = function(e) {
            var data = read.result;
            $("#headImgBase64").attr('src', data);
        }
    }

    $('#userInfoSave').click(function () {
        var param = {
            "nick":$('#nick').val(),
            "headImg":$("#headImgBase64").attr('src')
        }
        console.info(param);
        $.post('/saveUserInfo', param, function (result) {
            if(result.code == 1) {
                toast("保存成功！");
                window.location = "/index";
            } else {
                toast("保存失败，请重新保存！");
            }
        });
    });
</script>
</html>